<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>给图片添加水印</title>
    <style>
        #canvas {
            display: block;
            /*margin: auto;*/
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<h3>watermark</h3>
<label for="fileInput">选择文件上传:</label>
<input type="file" id="fileInput" accept="image/*">
<canvas id="canvas" width="600" height="600"></canvas>
<img id="img-box" src="" alt="">
<script>

    let imgEl = document.getElementById("img-box")

    function imageAddWatermark(file) {
        let reader = new FileReader();
        reader.onload = function (e) {
            let img = new Image();
            img.onload = function () {
                let image = img
                let canvas = document.getElementById('canvas');
                let ctx = canvas.getContext('2d');

                // 调整 canvas 大小以匹配图片
                canvas.width = image.width;
                canvas.height = image.height;

                // 绘制原始图片
                ctx.drawImage(image, 0, 0);

                // 设置水印文字
                let text = '水印文字';
                let fontSize = 24;
                let fontColor = '#ffffff'; // 水印颜色
                let fontFace = 'Arial'; // 字体类型
                let opacity = 0.5; // 透明度
                let angle = 45; // 水印倾斜角度
                let spacingX = 400; // X 方向间距
                let spacingY = 400; // Y 方向间距
                let startX = 50; // 开始位置 X
                let startY = 50; // 开始位置 Y

                // 设置字体样式
                ctx.font = fontSize + 'px ' + fontFace;
                ctx.fillStyle = fontColor;
                ctx.globalAlpha = opacity;

                // 添加水印
                for (let y = startY; y < canvas.height; y += spacingY) {
                    for (let x = startX; x < canvas.width; x += spacingX) {
                        // 保存状态
                        ctx.save();
                        // 移动到指定位置
                        ctx.translate(x, y);
                        // 旋转
                        ctx.rotate(angle * Math.PI / 180);
                        // 绘制文字
                        ctx.fillText(text, 0, 0);
                        // 恢复状态
                        ctx.restore();
                    }
                }

                canvas.toBlob(blob => {
                    if (!blob) {
                        console.log('Failed to convert canvas to blob.')
                    } else {
                        // console.log("blob", blob.size / 1024 / 1024, "MB")
                        // img.src = URL.createObjectURL(blob);
                        imgEl.src = URL.createObjectURL(blob);
                        let fileWithWatermark = new File([blob], "tmp.jpg", {type: blob.type});
                        // console.log("file",fileWithWatermark)
                        console.log("size", fileWithWatermark.size / 1024 / 1024, "MB")
                    }
                }, 'image/jpeg');
                // canvas 转成 file
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }

    document.getElementById('fileInput').addEventListener('change', function (event) {
        let file = event.target.files[0];
        if (!file) {
            return;
        }
        imageAddWatermark(file)
    })

</script>
</body>
</html>